<template>
	<div class="table">
	        <div class="crumbs">
            <el-breadcrumb separator="/">
            	<el-breadcrumb-item :to="{ path: '/testlib' }">真题库</el-breadcrumb-item>
                <el-breadcrumb-item>题目列表</el-breadcrumb-item>
<!--                 <el-breadcrumb-item>基础表格</el-breadcrumb-item> -->
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-button type="success" icon="plus" class="handle-del mr10" @click="create">添加材料</el-button>
<!--             <el-button type="warning" icon="upload" class="handle-del mr10" @click="create">导入真题</el-button> -->
            <el-input placeholder="筛选关键词" class="handle-input mr10"></el-input>
            <el-button type="primary" icon="search">搜索</el-button>
        </div>
		<el-card class="box-card" v-for="(o,k) in tableData" :key="k">
		  <div slot="header" class="clearfix">
		    <span style="line-height: 36px;" >
                <el-row>
                    <el-col :span="20">
                        <el-tag type="danger">材料{{o.ordering}}</el-tag>&nbsp;
                    </el-col>
                    <el-col :span="4">
<!--                         <el-button class="right_button" type="primary" size="small" @click="edit(o)">编辑</el-button>
                        <el-button class="right_button2" type="danger" size="small">删除</el-button> -->
                        <el-button-group>
                          <el-button type="primary" icon="edit" size="small"  @click="edit(o)">编辑</el-button>
                          <el-button type="danger" icon="delete" size="small" @click="del(o)">删除</el-button>
                        </el-button-group>
                    </el-col>
                </el-row>
                <el-row>
                 <a v-html="o.body"></a>
                </el-row>
            </span>

		  </div>
          </el-card>

          <div class="text item">
            <el-card class="box-card">
                <div slot="header" class="clearfix card-header" >
                    <el-row>
                        <el-col :span="20">
                            <el-tag>材料问题</el-tag>&nbsp;
                        </el-col>
                        <el-col :span="4">
                            <el-button type="success" icon="plus" size="small" @click="create_question()">添加问题</el-button>
                        </el-col>
                    </el-row>
                </div>
                    <el-table :data="qsData" style="width: 100%" empty-text="暂无数据,请添加答案">
                        <el-table-column label="#" width="50">
                            <template scope="scope">
                                {{scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="body" label="问题文本" width="950">
                            <template scope="scope">
                                <span v-html="scope.row.body"></span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template scope="scope">
                                <el-button-group>
                                <el-button type="primary" icon="edit" size="small" @click="edit_question(scope.row)">编辑</el-button>
                                 <el-button type="warning" icon="warning" size="small" @click="delete_aws(scope.row)">解析</el-button>
                                <el-button type="danger" icon="delete" size="small" @click="delete_aws(scope.row)">删除</el-button>
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </el-table>
            </el-card>
          </div>
		<div class="dialog">
            <el-dialog title="基本信息" :visible.sync="isadding" size="small">
              <el-form :model="material" label-position="top">
              <el-row>
                <el-col :span="24">
                    <el-form-item label="材料序号" label-width="80px">
                            <el-input v-model="material.ordering" auto-complete="off"></el-input>
                    </el-form-item>
                </el-col>
              </el-row>
              <el-row>
              <el-col :span="24">
			     <el-form-item label="材料详情" label-width="80px" >
			        <quill-editor ref="questionEditor"
			                      v-model="material.body"
			                      :options="editorOption">
<!-- 			                      @blur="onEditorBlur($event)"
			                      @focus="onEditorFocus($event)"
			                      @ready="onEditorReady($event)"> -->
			        </quill-editor>
<!-- 			        <div class="html ql-editor" v-html="content"></div> -->
			     </el-form-item>
                 </el-col>
                </el-row>
<!--                 <el-form-item label="发布" label-width="80px">
                	<el-radio class="radio" v-model="material.state" label="1">发布</el-radio>
					<el-radio class="radio" v-model="material.state" label="0">不发布</el-radio>
                </el-form-item> -->
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="isadding = false">取 消</el-button>
                <el-button type="primary" @click="save(true)" v-show="material.id < 1">确 定</el-button>
                <el-button type="success" @click="update()" v-show="material.id > 0">更 新</el-button>
              </div>
            </el-dialog>
            <el-dialog title="问题信息" :visible.sync="isaddingaws">
                <el-form :model="question">
                    <el-form-item label="问题详情" label-width="80px">
                        <quill-editor ref="answerEditor"
                                      v-model="question.body"
                                      :options="questionEditorOption">
                        </quill-editor>
    <!--                    <div class="html ql-editor" v-html="content"></div> -->
                    </el-form-item>
                    <el-form-item label="问题分数" label-width="80px">
                            <el-input v-model="question.score" auto-complete="off"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="isaddingaws = false">取 消</el-button>
                    <el-button type="primary" v-show="question.id < 1" @click="save_question(true)">确 定</el-button>
                    <el-button type="success" v-show="question.id > 0" @click="save_question(false)">更 新</el-button>
                  </div>
                </el-form>
            </el-dialog>
            <el-dialog title="题目解析" :visible.sync="isanalysis">
                <el-form :model="question">
                    <el-form-item label="解析详情" label-width="80px">
                        <quill-editor ref="answerEditor"
                                      v-model="question.analysis"
                                      :options="analysisEditorOption">
                        </quill-editor>
    <!--                    <div class="html ql-editor" v-html="content"></div> -->
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="isanalysis = false">取 消</el-button>
                    <el-button type="success" @click="save_analysis()">更 新</el-button>
                  </div>
                </el-form>
            </el-dialog>
        </div>
	</div>
</template>
<script>
    import http from "../../lib/http"
    import tree from "../../lib/tree"
    import "../../assets/main.css"
    export default {
    	data : function(){
    		var params = this.$route.path.split("-")
    		this.library_id = params[1]
    		return {
    			isadding : false,
                isanalysis : false,
                isaddingaws : false,
                tableData : [],
                qsData: [],
                pointCategories : [],
                editorOption : { placeholder : "请输入题目文本"},
                questionEditorOption: {
                  placeholder:"请输入问题详情",
                  modules: {
                    toolbar: [
                      ['bold', 'italic'],
                      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                      ['link', 'image']
                    ]
                  }
                },
                analysisEditorOption: {
                  placeholder:"请输入解析",
                  modules: {
                    toolbar: [
                      ['bold', 'italic'],
                      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                      ['link', 'image']
                    ]
                  }
                },
                typeHash : {
                    "0" : "单选",
                    "1" : "多选",
                    "2" : "材料",
                    "3" : "文本",
                    "4" : "不定项"
                },
    			type : [{
    				value : "0",
    				title : "单选"
    			},{
    				value : "1",
    				title : "多选"
    			},{
    				value : "2",
    				title : "材料"
    			},{
    				value : "3",
    				title : "文本"
    			},{
    				value : "4",
    				title : "不定项"
    			}],
                item:{

                },
    			material : {
    				id : 0,
    				body : "",
                    ordering : "",
    				pq_sl_test_library_id: params[1]
    			}, 
                //id, pq_sl_test_item_material_id, body, analysis, score, note, created_time, updated_time
                question : {
                    id : 0,
                    //pq_sl_test_item_material_id : 0,
                    body : "",
                    analysis : "",
                    score : "0",
                    note : ""
                },               
                pagination : {
                    current : 1,
                    total : 0,
                    size : 20
                }
    		}
    	},
    	created : function(){
            var self = this;
            http.get(self,"point_categories",{code:"CS_ROOT"}).then((res) => {
                var response = res.data
                //console.log(response.data)
                if (response.code == "ok") {
                    self.pointCategories = tree.make(response.data,"pid",response.data[0].pid)
                }
            })
            http.alive(this,function(){
                self.getData();
            })
    	},
        // computed : {
        //     data : function(){
        //         const self = this;
        //         return self.tableData.filter(function(d){
        //             d.answer_data = JSON.parse(d.answer_data)
        //             return d
        //         })
        //     }
        // },
    	methods : {
            initItem : function(){
                this.item = {
                    id : 0,
                    pid : 0,
                    type : "0",
                    body : "",
                    state : "0",
                    analysis : "",
                    pq_test_point_category_id : "",
                    pq_sl_test_library_id: this.library_id
                }
            },
            initMaterial : function(){
                this.material = {
                    id : 0,
                    body : "",
                    ordering : "",
                    pq_sl_test_library_id: this.library_id
                }
            },
            initQuestion : function(){
                this.question = {
                    id : 0,
                    //pq_sl_test_item_material_id : 0,
                    pq_sl_test_library_id:0,
                    body : "",
                    analysis : "",
                    score : "0",
                    note : ""
                }
            },
    		create : function(){
                this.initMaterial()
    			this.isadding = true
                
    		},
            create_question : function(){
                this.isaddingaws = true
                this.initQuestion()
                //this.question.pq_sl_test_item_material_id = row.id
                this.question.pq_sl_test_library_id = this.library_id
            },
            del : function(material){
                var self = this
                this.$confirm('是否确定删除此题目?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    http.delete(self,"cs_test_libraries_item/"+material.id).then(function(res){
                        self.$notify.success("成功","删除成功!")
                        self.getData()
                    })
                }).catch(() => {
     
                });
            },
            update_analysis : function(row){
                this.isanalysis = true
                this.material = JSON.parse(JSON.stringify(row))
            },
            edit_question : function(question){
                //console.log(question)
                this.isaddingaws = true
                this.question.id = question.id
                //this.question.pq_sl_test_item_material_id = question.PqSlTestItemMaterialId
                this.question.pq_sl_test_library_id = this.library_id
                this.question.body = question.body
                this.question.score = question.score
                console.log(question)
            },

            delete_aws : function(row){
                var self = this
                this.$confirm('是否确定删除此答案?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    http.delete(self,"sl_test_libraries_item/"+row.id+"/question").then(function(res){
                        // if (self.material.id > 0) {
                        //     http.get(self,"cs_test_libraries_item/"+self.material.id+"/detail").then(function(res){
                        //         self.item = res.data.data
                        //     })
                        // }
                        self.getData()
                    })
                }).catch(() => {
     
                });
            },
            save_question : function(add){
                var self = this
                return http.post(this,"sl_test_libraries_item/"+this.library_id+'/question',this.question).then((res)=>{
                    self.isaddingaws = false
                    var data = res.data
                    if (data.code == "ok") {
                        self.$notify.success({
                            title : "成功",
                            message : add ? "添加成功" : "编辑成功"
                        })
                        //this.item.answer_data.push(this.answer)
                        self.getData()
                    }
                    else{
                        self.$notify.error({
                            title : "错误",
                            message : data.msg
                        })
                    }
                })
            },
            edit : function(row){
                this.isadding = true
                this.material = JSON.parse(JSON.stringify(row))
            },
            update : function(){
                this.save(false)
            },
            getData : function(){
                var self = this;
                this.loading = true
                var params = {
                    skip : (this.pagination.current - 1) * this.pagination.size,
                    limit : this.pagination.size
                }
                http.get(self,"sl_test_libraries_material/"+this.library_id,params).then((res) => {
                    var response = res.data
                    self.loading = false
                    if (response.code == "ok") {
                        console.log(response.data)
                        if (!response.data) {
                            self.tableData = []
                            self.pagination.total = 0
                        }
                        else{
                            self.tableData = response.data.sl
                            self.qsData = response.data.qs
                            for(var i=0,j=self.tableData.length;i<j;i++){
                                if(self.tableData[i].question_data != ""){
                                    self.tableData[i].question_data = JSON.parse(self.tableData[i].question_data)
                                }
                                else{
                                    self.tableData[i].question_data = []
                                }
                            }
                            self.pagination.total = response.total * 1
                        }
                    }
                    
                    
                })
                
                // if(process.env.NODE_ENV === 'development'){
                //     self.url = '/ms/table/list';
                // };
                // self.$axios.post(self.url, {page:self.cur_page}).then((res) => {
                //     self.tableData = res.data.list;
                // })
            },
            save_analysis : function(){
                //this.item = JSON.parse(JSON.stringify(row))
                this.save()
            },
    	    save : function(add){
                var self = this

                http.post(this,"sl_test_libraries_material/"+this.library_id,this.material).then((res)=>{
                    self.isadding = false
                    self.isanalysis = false
                    var data = res.data
                    if (data.code == "ok") {
                    	self.$notify.success({
                            title : "成功",
                            message : add ? "添加成功" : "编辑成功"
                        })
                        self.getData()
                    }
                    else{
                        self.$notify.error({
                            title : "错误",
                            message : data.msg
                        })
                    }
                    this.initItem()
                })
            }
    	}
    }
</script>
<style scoped>
.box-card{
    margin: 0 0 20px 0
}
/*.right_button {
    float:right;
    margin: -65px 65px 20px 0px;
}*/
/*.right_button2{
    float:right;
    margin: -65px 15px 20px 0px;
}*/
</style>